<template>
  <view class="my-courses">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">我的课程</text>
    </view>
    
    <!-- 状态切换 -->
    <view class="status-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', currentTab === tab.value ? 'active' : '']"
        @tap="switchTab(tab.value)"
      >
        {{ tab.name }}
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-container" v-if="isLoading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 课程列表 -->
    <view class="courses-list" v-else-if="coursesList.length > 0">
      <view class="course-item" v-for="(course, index) in coursesList" :key="index">
        <view class="course-info">
          <view class="course-header">
            <text class="course-name">{{ course.kc || '课程辅导' }}</text>
            <text :class="['course-status', getStatusClass(course.status)]">{{ getStatusText(course.status) }}</text>
          </view>
          
          <view class="course-details">
            <view class="detail-row">
              <text class="label">预约日期：</text>
              <text class="value">{{ course.bookingDate }}</text>
            </view>
            <view class="detail-row">
              <text class="label">时间段：</text>
              <text class="value">{{ course.timeSlot }}</text>
            </view>
            <view class="detail-row">
              <text class="label">年级：</text>
              <text class="value">{{ course.grade }}</text>
            </view>
            <view class="detail-row">
              <text class="label">地区：</text>
              <text class="value">{{ course.province }} {{ course.city }} {{ course.district }}</text>
            </view>
            <view class="detail-row">
              <text class="label">价格：</text>
              <text class="value price">¥{{ course.price }}</text>
            </view>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="course-actions">
          <button class="action-btn detail" @tap="viewDetail(course)">查看详情</button>
          <button class="action-btn cancel" @tap="cancelBooking(course)" v-if="course.status === 0">取消预约</button>
          <button class="action-btn contact" @tap="contactTeacher(course)">联系老师</button>
          <button class="action-btn evaluate" @tap="evaluateTeacher(course)" v-if="course.status === 3 && !course.teacherRating">评价教师</button>
          <button class="action-btn modify-evaluate" @tap="evaluateTeacher(course)" v-if="course.status === 3 && course.teacherRating">修改评价</button>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image class="empty-icon" src="http://101.200.154.121:19000/teacher-manage-static/static/empty.png" mode="aspectFit"></image>
      <text class="empty-text">暂无预约课程</text>
      <button class="browse-btn" @tap="goToCourses">浏览课程</button>
    </view>
    
    <!-- 取消确认弹窗 -->
    <view class="modal" v-if="showCancelModal">
      <view class="modal-content">
        <view class="modal-title">确认取消</view>
        <view class="modal-message">是否确认取消该课程预约？</view>
        <view class="modal-actions">
          <button class="modal-btn cancel" @tap="showCancelModal = false">取消</button>
          <button class="modal-btn confirm" @tap="confirmCancel">确认</button>
        </view>
      </view>
    </view>

    <!-- 评价弹窗 -->
    <view class="modal evaluation-modal" v-if="showEvaluationModal">
      <view class="modal-content evaluation-content">
        <view class="modal-title">{{ currentCourse?.teacherRating ? '修改评价' : '评价教师' }}</view>

        <!-- 教师信息 -->
        <view class="teacher-info">
          <text class="teacher-name">{{ currentCourse?.teacherName || '教师' }}</text>
          <text class="course-name">{{ currentCourse?.kc || '课程辅导' }}</text>
        </view>

        <!-- 评分 -->
        <view class="rating-section">
          <text class="rating-label">教学评分</text>
          <view class="star-rating">
            <view
              v-for="(star, index) in 5"
              :key="index"
              :class="['star', index < evaluation.rating ? 'active' : '']"
              @tap="setRating(index + 1)"
            >
              ★
            </view>
          </view>
          <text class="rating-text">{{ getRatingText(evaluation.rating) }}</text>
        </view>

        <!-- 评论 -->
        <view class="comment-section">
          <text class="comment-label">评价内容</text>
          <textarea
            class="comment-input"
            v-model="evaluation.comment"
            placeholder="请输入您对教师的评价..."
            maxlength="200"
            :show-count="true"
          ></textarea>
        </view>

        <view class="modal-actions">
          <button class="modal-btn cancel" @tap="closeEvaluationModal">取消</button>
          <button class="modal-btn confirm" @tap="submitEvaluation" :disabled="evaluation.rating === 0">
            {{ currentCourse?.teacherRating ? '修改评价' : '提交评价' }}
          </button>
        </view>
      </view>
    </view>

    <!-- 联系老师弹窗 -->
    <view class="modal contact-modal" v-if="showContactModal">
      <view class="modal-content contact-content">
        <view class="modal-title">联系老师</view>



        <!-- 联系方式 -->
        <view class="contact-options-simple" v-if="teacherContactInfo">
          <!-- 手机号 -->
          <view class="contact-option-simple primary" v-if="teacherContactInfo.phone" @tap="makePhoneCall(teacherContactInfo.phone)">
            <text class="option-icon-simple">📞</text>
            <text class="option-text">{{ teacherContactInfo.phone }}</text>
            <text class="option-action-simple">拨打</text>
          </view>

          <!-- 邮箱 -->
          <view class="contact-option-simple" v-if="teacherContactInfo.email" @tap="copyToClipboard(teacherContactInfo.email, '邮箱')">
            <text class="option-icon-simple">📧</text>
            <text class="option-text">{{ teacherContactInfo.email }}</text>
            <text class="option-action-simple">复制</text>
          </view>

          <!-- 微信号 -->
          <view class="contact-option-simple" v-if="teacherContactInfo.wechat" @tap="copyToClipboard(teacherContactInfo.wechat, '微信号')">
            <text class="option-icon-simple">💬</text>
            <text class="option-text">{{ teacherContactInfo.wechat }}</text>
            <text class="option-action-simple">复制</text>
          </view>

          <!-- QQ号 -->
          <view class="contact-option-simple" v-if="teacherContactInfo.qq" @tap="copyToClipboard(teacherContactInfo.qq, 'QQ号')">
            <text class="option-icon-simple">🐧</text>
            <text class="option-text">{{ teacherContactInfo.qq }}</text>
            <text class="option-action-simple">复制</text>
          </view>
        </view>

        <!-- 加载状态 -->
        <view class="contact-loading-simple" v-else>
          <view class="loading-spinner-simple"></view>
          <text class="loading-text-simple">获取联系方式中...</text>
        </view>

        <view class="modal-actions">
          <button class="modal-btn cancel" @tap="closeContactModal">关闭</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { bookingApi } from '../../api'
import { teacherApi } from '../../api'

export default {
  data() {
    return {
      isLoading: true,
      currentTab: 'all',
      tabs: [
        { name: '全部', value: 'all' },
        { name: '待上课', value: '1' },
        { name: '已完成', value: '3' },
        { name: '已取消', value: '2' }
      ],
      coursesList: [],
      originalList: [],
      showCancelModal: false,
      showEvaluationModal: false,
      showContactModal: false,
      currentCourse: null,
      teacherContactInfo: null,
      evaluation: {
        rating: 0,
        comment: ''
      }
    }
  },
  onLoad() {
    this.loadCourses()
  },
  onShow() {
    this.loadCourses()
  },
  onPullDownRefresh() {
    this.loadCourses()
  },
  methods: {
    // 获取预约课程列表
    async loadCourses() {
      try {
        this.isLoading = true
        
        // 获取用户信息
        const userInfo = uni.getStorageSync('userInfo')
        if (!userInfo || !userInfo.id) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/login/login'
            })
          }, 1500)
          return
        }
        
        // 请求用户预约课程 todo
        // const res = await new Promise((resolve, reject) => {
        //   uni.request({
        //     url: `/bookings/user/${userInfo.id}`,
        //     method: 'GET',
        //     header: {
        //       'Authorization': uni.getStorageSync('access_token')
        //     },
        //     success: (response) => {
        //       resolve(response.data)
        //     },
        //     fail: (error) => {
        //       reject(error)
        //     }
        //   })
        // })
		console.log("mycourses:userinfo："+JSON.stringify(userInfo))
		const res = await bookingApi.getUserBookings(userInfo)
        
        console.log('获取预约列表结果:', res)
        
        if (res.code === 200) {
          this.originalList = res.data || []
          
          // 过滤和格式化数据
          this.filterCourses()
        } else {
          uni.showToast({
            title: res.message || '获取课程失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载课程失败:', error)
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
        uni.stopPullDownRefresh()
      }
    },
    
    // 根据状态过滤课程
    filterCourses() {
      if (this.currentTab === 'all') {
        this.coursesList = [...this.originalList]
      } else {
        this.coursesList = this.originalList.filter(course => 
          String(course.status) === this.currentTab
        )
      }
    },
    
    // 切换标签
    switchTab(tabValue) {
      this.currentTab = tabValue
      this.filterCourses()
    },
    
    // 获取状态文本
    getStatusText(status) {

      switch (Number(status)) {
        case 1: return '已支付'
        case 2: return '已取消'
        case 3: return '已完成'
        default: return '未知状态'
      }
    },
    
    // 获取状态类名
    getStatusClass(status) {
      switch (Number(status)) {
        case 3: return 'paid'
        case 1: return 'completed'
        case 2: return 'cancelled'
        default: return ''
      }
    },
    
    // 查看详情
    viewDetail(course) {
      uni.navigateTo({
        url: `/pages/booking/detail?id=${course.id}`
      })
    },
    
    // 联系老师
    async contactTeacher(course) {
      this.currentCourse = course
      this.teacherContactInfo = null
      this.showContactModal = true

      // 从课程数据中获取教师联系方式
      this.getTeacherContactFromCourse(course)
    },

    // 从课程数据中获取教师联系方式
    getTeacherContactFromCourse(course) {
      try {
        // 模拟加载延迟
        setTimeout(() => {
          if (course.teacherCertification) {
            // 从teacherCertification中获取联系方式
            const cert = course.teacherCertification
            this.teacherContactInfo = {
              id: cert.teacherId,
              name: this.getTeacherName(cert), // 根据认证信息生成教师名称
              avatarUrl: '/static/default-avatar.png', // 默认头像
              phone: cert.phone,
              email: cert.email,
              education: cert.education,
              graduateSchool: cert.graduateSchool,
              major: cert.major,
              teachingYears: cert.teachingYears,
              // 其他联系方式暂时为空，可以根据需要添加
              wechat: null,
              qq: null
            }
          } else {
            // 如果没有教师认证信息，显示错误
            uni.showToast({
              title: '暂无教师联系方式',
              icon: 'none'
            })
            this.closeContactModal()
          }
        }, 300) // 减少加载时间
      } catch (error) {
        console.error('获取教师联系方式失败:', error)
        uni.showToast({
          title: '获取联系方式失败',
          icon: 'none'
        })
        this.closeContactModal()
      }
    },

    // 根据认证信息生成教师名称
    getTeacherName(cert) {
      if (cert.major && cert.graduateSchool) {
        return `${cert.major}老师`
      } else if (cert.major) {
        return `${cert.major}老师`
      } else {
        return '教师'
      }
    },


    // 关闭联系弹窗
    closeContactModal() {
      this.showContactModal = false
      this.currentCourse = null
      this.teacherContactInfo = null
    },

    // 拨打电话
    makePhoneCall(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber,
        success: () => {
          console.log('拨打电话成功')
        },
        fail: (error) => {
          console.error('拨打电话失败:', error)
          uni.showToast({
            title: '拨打电话失败',
            icon: 'none'
          })
        }
      })
    },

    // 复制到剪贴板
    copyToClipboard(text, type) {
      uni.setClipboardData({
        data: text,
        success: () => {
          uni.showToast({
            title: `${type}已复制到剪贴板`,
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 取消预约
    cancelBooking(course) {
      this.currentCourse = course
      this.showCancelModal = true
    },
    
    // 确认取消预约
    async confirmCancel() {
      if (!this.currentCourse) return
      
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `http://203.34.152.33/user/bookings/cancel/${this.currentCourse.id}`,
            method: 'PUT',
            header: {
              'Authorization': uni.getStorageSync('access_token')
            },
            success: (response) => {
              resolve(response.data)
            },
            fail: (error) => {
              reject(error)
            }
          })
        })
        
        if (res.code === 200) {
          uni.showToast({
            title: '预约已取消',
            icon: 'success'
          })
          
          // 更新当前课程状态
          this.currentCourse.status = 2
          
          // 重新加载课程列表
          await this.loadCourses()
        } else {
          uni.showToast({
            title: res.message || '取消失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('取消预约失败:', error)
        uni.showToast({
          title: '取消失败，请重试',
          icon: 'none'
        })
      } finally {
        this.showCancelModal = false
        this.currentCourse = null
      }
    },
    
    // 浏览课程
    goToCourses() {
      uni.switchTab({
        url: '/pages/course/index'
      })
    },

    // 评价教师
    evaluateTeacher(course) {
      this.currentCourse = course

      // 如果已有评价，预填充数据
      if (course.teacherRating) {
        this.evaluation = {
          rating: course.teacherRating.commentRating || 0,
          comment: course.teacherRating.comment || ''
        }
      } else {
        this.evaluation = {
          rating: 0,
          comment: ''
        }
      }

      this.showEvaluationModal = true
    },

    // 关闭评价弹窗
    closeEvaluationModal() {
      this.showEvaluationModal = false
      this.currentCourse = null
      this.evaluation = {
        rating: 0,
        comment: ''
      }
    },

    // 设置评分
    setRating(rating) {
      this.evaluation.rating = rating
    },

    // 获取评分文本
    getRatingText(rating) {
      const texts = ['', '很差', '较差', '一般', '满意', '非常满意']
      return texts[rating] || ''
    },

    // 提交评价
    async submitEvaluation() {
      if (this.evaluation.rating === 0) {
        uni.showToast({
          title: '请选择评分',
          icon: 'none'
        })
        return
      }

      try {
        uni.showLoading({
          title: '提交中...'
        })

        const userInfo = uni.getStorageSync('userInfo')
        const evaluationData = {
          bookingId: this.currentCourse.id,
          teacherId: this.currentCourse.teacherId,
          userId: userInfo.id,
          rating: this.evaluation.rating,
          comment: this.evaluation.comment.trim(),
          isModify: !!this.currentCourse.teacherRating // 标识是否为修改评价
        }

        // 调用评价API
        const res = await bookingApi.evaluateTeacher(evaluationData)

        uni.hideLoading()

        if (res.code === 200) {
          const isModify = !!this.currentCourse.teacherRating
          uni.showToast({
            title: isModify ? '修改评价成功' : '评价成功',
            icon: 'success'
          })

          // 更新当前课程的评价数据
          if (isModify) {
            // 修改评价：更新现有评价数据
            this.currentCourse.teacherRating.commentRating = this.evaluation.rating
            this.currentCourse.teacherRating.comment = this.evaluation.comment.trim()
          } else {
            // 新增评价：创建评价数据
            this.currentCourse.teacherRating = {
              commentRating: this.evaluation.rating,
              comment: this.evaluation.comment.trim(),
              bookingId: this.currentCourse.id,
              teacherId: this.currentCourse.teacherId,
              userId: userInfo.id
            }
          }

          // 关闭弹窗
          this.closeEvaluationModal()

          // 重新加载数据
          this.loadCourses()
        } else {
          uni.showToast({
            title: res.message || (this.currentCourse.teacherRating ? '修改评价失败' : '评价失败'),
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        console.error('提交评价失败:', error)
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.my-courses {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.header {
  padding: 30rpx;
  background-color: #ffffff;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.status-tabs {
  display: flex;
  background-color: #ffffff;
  padding: 0 20rpx;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #4080FF;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #4080FF;
  border-radius: 2rpx;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #4080FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.courses-list {
  padding: 20rpx;
}

.course-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.course-info {
  padding: 20rpx;
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.course-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.course-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.course-status.paid {
  background-color: rgb(232, 76, 199);
  color: #ffffff;
}

.course-status.completed {
  background-color: #E5F7EF;
  color: #52C41A;
}

.course-status.cancelled {
  background-color: #F5F5F5;
  color: #999;
}

.course-details {
  padding: 10rpx 0;
}

.detail-row {
  display: flex;
  margin-bottom: 16rpx;
  font-size: 28rpx;
}

.label {
  color: #666;
  width: 160rpx;
}

.value {
  color: #333;
  flex: 1;
}

.value.price {
  color: #FF6B00;
  font-weight: bold;
}

.course-actions {
  display: flex;
  padding: 20rpx;
  border-top: 1px solid #f0f0f0;
}

.action-btn {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  margin: 0 10rpx;
  background-color: #ffffff;
}

.action-btn.detail {
  color: #4080FF;
  border: 1px solid #4080FF;
}

.action-btn.cancel {
  color: #FF6B00;
  border: 1px solid #FF6B00;
}

.action-btn.contact {
  color: #ffffff;
  background-color: #4080FF;
}

.action-btn.evaluate {
  color: #ffffff;
  background-color: #ff9500;
}

.action-btn.modify-evaluate {
  color: #ffffff;
  background-color: #52c41a;
}

.evaluated-tag {
  background-color: #f0f0f0;
  color: #999;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  text-align: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.browse-btn {
  width: 240rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #4080FF;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 40rpx;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 30rpx;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.modal-message {
  padding: 40rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}

.modal-actions {
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.modal-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 28rpx;
}

.modal-btn.cancel {
  color: #999;
  border-right: 1px solid #f0f0f0;
}

.modal-btn.confirm {
  color: #FF6B00;
}

/* 评价弹窗样式 */
.evaluation-modal .modal-content {
  width: 680rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.teacher-info {
  padding: 20rpx 30rpx;
  text-align: center;
  background: #f8f9fa;
  margin-bottom: 20rpx;
}

.teacher-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.course-name {
  font-size: 26rpx;
  color: #666;
}

.rating-section {
  padding: 20rpx 30rpx;
  text-align: center;
}

.rating-label {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.star-rating {
  display: flex;
  justify-content: center;
  gap: 10rpx;
  margin-bottom: 15rpx;
}

.star {
  font-size: 60rpx;
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s;
}

.star.active {
  color: #ffb400;
}

.rating-text {
  font-size: 26rpx;
  color: #666;
}

.comment-section {
  padding: 20rpx 30rpx;
}

.comment-label {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.comment-input {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  line-height: 1.5;
  box-sizing: border-box;
}

.modal-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 简洁联系老师弹窗样式 */
.contact-modal .contact-content {
  width: 560rpx;
  border-radius: 16rpx;
}

.teacher-info-simple {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  margin: 20rpx 0;
}

.teacher-avatar-simple {
  width: 70rpx;
  height: 70rpx;
  border-radius: 35rpx;
  margin-right: 15rpx;
}

.teacher-details {
  flex: 1;
}

.teacher-name-simple {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.teacher-subject-simple {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.teacher-tags-simple {
  display: flex;
  gap: 8rpx;
}

.tag-simple {
  background: #f0f7ff;
  color: #4080FF;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
}

.contact-options-simple {
  margin: 15rpx 0;
}

.contact-option-simple {
  display: flex;
  align-items: center;
  padding: 18rpx 20rpx;
  margin-bottom: 12rpx;
  background: #fff;
  border: 1rpx solid #f0f0f0;
  border-radius: 12rpx;
  transition: all 0.2s;
}

.contact-option-simple:active {
  background-color: #f8f9fa;
  transform: scale(0.98);
}

.contact-option-simple:last-child {
  margin-bottom: 0;
}

.contact-option-simple.primary {
  background: #4080FF;
  border-color: #4080FF;
}

.contact-option-simple.primary .option-text,
.contact-option-simple.primary .option-action-simple {
  color: #fff;
}

.option-icon-simple {
  font-size: 28rpx;
  margin-right: 15rpx;
  width: 40rpx;
  text-align: center;
}

.option-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.option-action-simple {
  font-size: 24rpx;
  color: #4080FF;
  padding: 6rpx 12rpx;
  background: rgba(64, 128, 255, 0.1);
  border-radius: 16rpx;
}

.contact-loading-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50rpx 0;
}

.loading-spinner-simple {
  width: 40rpx;
  height: 40rpx;
  border: 3rpx solid #f3f3f3;
  border-top: 3rpx solid #4080FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15rpx;
}

.loading-text-simple {
  font-size: 24rpx;
  color: #999;
}
</style>